<template>
  <div>
    <div class="ba-operate-form">
      <el-form :model="value" @keyup.enter.native="getDataList()" label-width="70px">
        <el-row :gutter="20">
          <el-collapse-transition>
            <div v-show="advanced">
              <search v-model="value" :formList="formList" @getDataList="getDataList" @getReset="getReset" />
            </div>
          </el-collapse-transition>
        </el-row>
      </el-form>
    </div>
    <c-form v-model="value" :showScreen="showScreen" :table-column="tableColumn" @check-change="checkChange"
      @changeAdvance="changeAdvance">
      <slot></slot>
    </c-form>
  </div>
</template>

<script>
import search from './components/wcs-search'
import cForm from './components/c-form'
export default {
  components: { cForm, search },
  props: {
    value: {
      type: Object,
      default: () => { }
    },
    tableColumn: {
      type: Array,
      default: () => []
    },
    advanced: {
      type: Boolean,
      default: false
    },
    showScreen: {
      type: Boolean,
      default: true
    },
    formList: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    // 过滤有操作栏时的筛选下拉项
    dropList() {
      return this.tableColumn.filter(item => item.prop)
    }
  },
  data() {
    return {
    }
  },
  methods: {
    checkChange(val) {
      this.$emit('check-change', val)
    },
    // 高级搜索切换
    changeAdvance() {
      this.$emit('changeAdvance')
    },
    getDataList() {
      this.$emit('getDataList')
    },
    getReset() {
      this.$emit('getReset')
    },
  },
}
</script>

<style scoped>
.senior {
  float: right;
}
</style>